<template>
    <div class="selectClassMdoel">
        <!-- <input type="text" class="inputClss" :placeholder="$t('ssts')">
        <div class="selectModel">
            <div v-for="item in list" :class="activeTab==item.label?'activeTab tab':'tab'" @click="tapSelect(item.label)">{{ $t(item.label) }}</div>
        </div> -->
        <div class="listModel" ref="scrollContainer">
            <div v-for="(item,i) in optionList" v-if="activeTab != 'wh'" class="item" @click="tapItem(item)">
                <div>
                    <div class="m_b_10 className">
                    <img class="img" :src="getIco(item.symbol)"/>
                    {{item.symbol}}</div>

                    <!-- <div class="font10">{{ item.price }}</div> -->
                </div>
                <!-- <div :class="item.diff > 0 ? 'rise' : item.diff <0 ? 'drop':'hui'" >
                    <div class="font12  m_r_10">{{ item.price }}</div>
                    <div :class="item.diff > 0 ? 'risebtn font12' : item.diff <0 ? 'dropbtn font12':'huibtn font12'" >{{ item.change }}%</div>
                    <div class="font10">{{ item.diff.toFixed(8) }}</div>
                </div> -->
                <div :class="item.diff > 0 ? 'rise' : item.diff <0 ? 'drop':'hui'" >
                    <div class="font12  m_r_10">{{ item.price.toFixed(4) }}</div>
                    <div :class="item.diff > 0 ? 'risebtn font12' : item.diff <0 ? 'dropbtn font12':'huibtn font12'" >{{ item.change.toFixed(2) }}%</div>
                </div>
                <!-- <div class="zf">
                    <div class="font12 drop">842.12</div>
                    <div class="font12 dropbtn">-0.15%</div>
                </div> -->
            </div>
            <div class="noData " v-if="optionList.length==0"> {{$t('nodata')}}</div>
        </div>
        <Loading :show="showLoading"></Loading>
    </div>
</template>
<script setup>
import {ref,onMounted,onBeforeUnmount,defineEmits} from 'vue'
import { ticker } from "@/api/api"
import { useRoute, useRouter } from 'vue-router';
import { getIco } from '@/api/kit';
const list = [{ label: "qb" }, { label: 'wh' }, { label: 'qq' }, { label: 'gjs' }, { label: 'jmhb' }, { label: 'gp' }]
const activeTab = ref('qb')
const scrollContainer = ref()
const isDark = ref()
const showLoading=ref(false)
const optionList = ref([])
const emits = defineEmits(['change'])
const router = useRouter();
onMounted(() => {
    
    if (localStorage.getItem('isDark')) {
        isDark.value = localStorage.getItem('isDark')
    }
    getticker()
    scrollContainer.value.addEventListener("scroll", handleScroll);
})
onBeforeUnmount(() => {
  if (scrollContainer.value) {
    scrollContainer.value.removeEventListener("scroll", handleScroll);
  }
  if(time.value){
    clearTimeout( time.value)
    time.value = null
  }
});
const handleScroll = () => {
  if (
    scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop ===
    scrollContainer.value.clientHeight
  ) {
    console.log("滚动条到底部了");
    // if (total.value > RecordsList.value.length) {
    //   prams.page += 1;
    //   getticker();
    // }
  }
};
const time = ref()
const getticker = ()=>{
  
    ticker().then(res=>{
        if (res.length > 0) {
        optionList.value = res
      }
      time.value = setTimeout(() => {
        getticker()
      }, 10000);
    })
}
const tapSelect = (e) =>{
    activeTab.value = e
}
const tapItem = (item)=>{
emits('change',item)
router.replace("/trade?symbol="+item.symbol)     
}
</script>
<style lang="less" scoped>
.selectClassMdoel {
    background: var(--backgroud);
    height: 100%;
    width: 100%;

    .inputClss {
        width: calc(100% - 40px);
        margin: 10px 20px;
        box-sizing: border-box;
        height: 35px;
        background-color: var(--inputBg);
        border-radius: 5px;
        border: 0;
        color: var(--inputText);
        padding: 0 10px;

    }

    .selectModel {
        display: flex;
        margin: 10px 0;
        overflow: auto;
        height: 20px;
        background: var(--homeCardBg);
        padding: 10px 0 5px;
        .tab{
            padding:0 20px;
            flex: none;
            font-size: 13px;
            line-height: 13px;
            height: 13px;
        }
        .activeTab {
            color: var(--activeTabbarText);
            position: relative;
        }

        .activeTab:after {
            content: '';
            position: absolute;
            width: 25px;
            border-radius: 5px;
            height: 3px;
            background: var(--activeAfterBg);
            bottom: -10px;
            left: 50%;
            transform: translate(-50%);
        }
        
    }
    .listModel{
            overflow: auto;
            height: 100%;
            .item{
                display: flex;
                justify-content: space-between;
                padding: 10px;
                align-items: center;
                align-content: center;
                text-align: center;
            }
            .className{
                align-content: center;
                text-align: center;
                color: var(  --activeTabbarText);
                img{
                    width: 30px;
                    height: 30px;
                }
            }
            .zf{
                display: flex;
    align-items: center;
            }
            .risebtn{
                background-color: #48e64c;
                color: #fff;
                padding: 4px 5px;
                border-radius: 3px;
                width: 40px;
                text-align: center;
            }
            .huibtn{
                background-color: #9c9d9c;
                color: #fff;
                padding: 4px 5px;
                border-radius: 3px;
                width: 40px;
                text-align: center;
            }
            .dropbtn{
                background-color:#f25a23;
                color: #fff;
                padding: 4px 5px;
                border-radius: 3px;
                width: 40px;
                text-align: center;
            }
            .dropbtn{
                background-color: #f25a23;
                color: #fff;
                padding: 4px 5px;
                border-radius: 3px;
            }
            .drop{
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
            }
            .rise{
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
            }
            .hui{
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
            }
        }
}</style>